<template>
    <div class = "container mx-auto p-4">
        <h1 class = "text-3xl font-bold mb-4">Posts List</h1>
        <article v-for="post in posts"
        :key = "post.id"
        class = "bg-white rounded-lg shadow-md p-4 mb-4"
        >
        <h2 class="text-xl font-semibold mb-2 ">
            <router-link :to="{name:'Detail',params:{id:post.id}}">
                {{ post.title }}
            </router-link>
        </h2>
        <p class = "text-gray-500">{{ post.category }}</p>
    </article>
    </div>
</template>

<script setup>
import { getPosts } from "../api/index.js";
import { ref,onMounted } from "vue"

const posts = ref([])

onMounted(async() => {
    const data = await getPosts()
    if(data){
        posts.value = data
    }
    // post.value = await getPosts()
})

</script>

<style lang="css" scoped>

</style>